<template>
  <div class="app">
    
    <div id="header" :class="'header'+type" v-if="nav">
      <div class="top ">
        <div class="box flex-bect">
          <span class="le">{{topMsg}}</span>
          <div class="ri">全国客服电话：{{phone}}</div>
        </div>
      </div>
      <div class="con">
        <div class="box flex-bect">
          <a href="./index.html" class="logo"><img src="./static/image/nav/logo.png" alt=""></a>
          <div id="nav">
            <dl class="nav flex-rict">
              <dd v-for="(item, index) in nav" :key="index" class="dd" :class="[item.list ? 'have have1' : item.tabList ? 'have have2':'']">
                <a :href="item.path" class="nava flex-ct">{{item.name}} <span class="jt"></span> </a>
                <div class="sub ani" v-if="item.list">
                  <div class="div">
                    <a v-for="(items, j) in item.list" :key="j" :href="items.path" class="sub-a ani">{{items.name}}</a>
                  </div>
                </div>
                <div class="sub subW ani" v-if="item.tabList">
                  <div class="div1">
                    <div class="flex-bect">
                      <div class="tab flex-bect" :class="['tab'+tabCur]">
                        <span v-for="(item2, index) in item.tabList" :key="index" class="btn" :class="{on: tabCur === index}" @click="tabCur = index">{{item2.name}}</span>
                      </div>
                      <div class="flex-rict">
                        <span v-for="item3 in item.tabList[tabCur].labs" :key="item3.id" class="lab"><b>·</b>{{item3}}</span>
                      </div>
                    </div>
                    <div class="list-box">
                      <div v-for="(item4, j) in item.tabList[tabCur].list" :key="j" class="list flex-lect">
                        <a :href="router.gjNewsDetail+'?id='+item.id" v-for="(item5, k) in item4" :key="k" class="item">
                          <div class="imgW"><img :src="item5.src" class="img" alt=""></div>
                          <div class="name row1">{{item5.name}}</div>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </dd>
            </dl>
          </div>
          
        </div>
      </div>
    </div>
    
    <div class="app-con">
      <slot></slot>
    </div>
    <div id="right">
      <div class="top">
        <img src="./static/image/nav/ri-ico1.png" alt="" class="ico">
        <div class="tit">预约看校</div>
      </div>
      <dl class="kefu">
        <dd v-for="item in kefu" :key="item.id" class="item">
          <span class="sp">{{item.name}}</span>
          <a href="" class="kfbtn">在线</a>
        </dd>
      </dl>
      <a href="./test.html" class="tit2"><img src="./static/image/nav/ri-ico2.png" alt="" class="ico">报考资格测评</a>
      <div class="bot">
        <div class="wx"><img src="./static/image/nav/wx.png" alt="" class="img1"></div>
        <div class="p1">扫一扫  加老师</div>
        <div class="p2">400-8230-180</div>
        <div class="line"></div>
        <div class="back" @click="goTop"></div>
      </div>
      
    </div>
    <div id="footer">
      <div class="box box1 flex-bect">
        <div class="le">
          <div class="tit">400-823-0180</div>
          <div class="item">
            <div class="tit2">国际学校</div>
            <div class="flex-lect">
              <a href="" class="a">国际小学</a>
              <span class="line"></span>
              <a href="" class="a">国际初中</a>
              <span class="line"></span>
              <a href="" class="a">国际高中</a>
              <span class="line"></span>
              <a href="" class="a">国际幼儿园 </a>
            </div>
          </div>
          <div class="item">
            <div class="tit2">私立学校</div>
            <div class="flex-lect">
              <a href="" class="a">私立小学</a>
              <span class="line"></span>
              <a href="" class="a">私立初中</a>
              <span class="line"></span>
              <a href="" class="a">私立高中</a>
            </div>
          </div>
        </div>
        
        <div class="form">
          <div class="tit"><img src="./static/image/nav/book-ico1.png" class="ico" alt=""> <b>预约看校</b></div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="76px" class="demo-ruleForm">
            <div class="flex-bect">
              <el-form-item label="学生姓名" prop="name">
                <el-input v-model="ruleForm.name" placeholder="学生姓名" class="text1"></el-input>
              </el-form-item>
              <el-form-item label="学生性别" prop="sex">
                <el-select v-model="ruleForm.sex" placeholder="请选择性别" class="text1">
                  <el-option label="女" value="2"></el-option>
                  <el-option label="男" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="手机号码" prop="mobile">
                <el-input v-model="ruleForm.mobile" placeholder="请填写手机号码" class="text1"></el-input>
              </el-form-item>
            </div>
            <div class="flex-bect">
              <el-form-item label="出生日期" prop="birthday">
                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.birthday" class="text2"></el-date-picker>
              </el-form-item>
              <el-form-item label="意向学校" prop="school">
                <el-select v-model="ruleForm.school" placeholder="请选择学校" class="text3">
                  <el-option v-for="item in schoolList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <div class="btn text1 flex-ct" @click="submit">提交</div>
            </div>
          </el-form>
        </div>
        <div class="ri">
          <div class="p2">快速择校/选校一站式服务</div>
          <div class="wx"><img src="./static/image/nav/wx.png" alt="" class="img"></div>
          <div class="p3">扫一扫 咨询老师</div>
        </div>
      </div>
      <div class="copy">职教招生网-智途教育（北京）教育有限公司（技术支持） 京ICP备15024715号-12</div>
    </div>
    
    <div class="home-pup" v-if="pup && type === 0">
      <div class="box1 flex-ct">
        <div class="bg-box">
          <img src="./static/image/home/pup.png" alt="" class="bg">
          <img src="./static/image/home/close.png" alt="" class="close" @click="pup = false">
          <a href="" class="btn kfbtn"></a>
        </div>
        
      </div>
    </div>
  </div>
  
</template>

<script>
// 不支持 import
const router = getPath();
console.log('router===>',router)
module.exports = {
  props:{
    logo:Number,
    type:{
      type:Number,
      default:0 // 0-全站， 1-国际学校， 2-私立学校
    }, 
  },
  data: function () {
    return {
      router:router,
      pup:true,
      ruleForm:{
        name:"", //学生名称
        sex:"", // 性别
        mobile:"", //手机号码
        birthday:"", //出生日期
        school:"", //意向学校
      },
      rules: {
        name: [
          { required: true, message: '学生名称不能为空', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '性别不能为空', trigger: 'change' }
        ],
        mobile: [
          { required: true, message: '手机号码不能为空', trigger: 'blur' }
        ],
        birthday: [
          { required: true, message: '出生日期不能为空', trigger: 'change' }
        ],
        school: [
          { required: true, message: '意向学校不能为空', trigger: 'blur' }
        ],
      },
      schoolList:[
        {id:1, name:'北京德闳学校'},
        {id:2, name:'北京市朝阳区赫...'},
        {id:3, name:'哈罗北京'},
        {id:4, name:'北京市朝阳区凯文...'},
        {id:5, name:'北京市朝阳区北...'},
        {id:6, name:'领科教育北京校区'},
        {id:7, name:'天津黑利伯瑞国...'},
        {id:8, name:'天津惠灵顿学校'},
        {id:9, name:'青苗国际幼儿园'},
        {id:10,name:'北京市顺义区诺德...'},
      ],
      
      phone:"400-823-0180",
      kefu:[
        {name:'国际小学', id:1},
        {name:'国际初中', id:2},
        {name:'国际高中', id:3},
        {name:'国际幼儿园', id:4},
        {name:'私立小学', id:5},
        {name:'私立初中', id:6},
        {name:'私立高中', id:7},
        {name:'开放日', id:8},
      ],
      tabCur:0,
      nav:null,
      bottom:[
        {name:'读本科', intro:'想了解行业及职业发展'},
        {name:'读硕士', intro:'想了解具体留学内容'},
        {name:'本硕连续', intro:'想深入了解学历内容'},
        {name:'国际高中', intro:'想了解行业及国家留学发展'}
      ],
      logo1:'./static/image/logo.png',
      logo2:'./static/image/logo2.png',
      topMsg:"", // 顶部消息
    };
  },
  components: {},
  mounted(){
    console.log('this.type===>',this.type)
    if(this.type === 1){
      this.nav = [
        {name:'首页', path:router.home},
        {name:'国际学校', path:router.gjHome},
        {name:'国际小学', path:router.gjxx},
        {name:'国际初中', path:router.gjcz},
        {name:'国际高中', path:router.gjgz},
        {name:'国际幼儿园', path:router.gjyey},
        {name:'预约看校', path:router.test},
        {name:'快速择校', path:router.gjzx},
      ];
      this.topMsg="专注国际教育，为3-17岁适龄学生提供择校服务"
    }else if(this.type === 2){
      this.nav = [
        {name:'首页', path:router.home},
        {name:'私立学校', path:router.sl},
        {name:'私立小学', path:router.slxx},
        {name:'私立初中', path:router.slcz},
        {name:'私立高中', path:router.slgz},
        {name:'预约看校', path:router.test},
        {name:'快速择校', path:router.slzx},
      ];
      this.topMsg="专注私立教育，为3-17岁适龄学生提供择校服务"
    }else{
      this.topMsg="专注教育，为3-17岁适龄学生提供择校服务"
      this.nav = [
        {name:'首页', path:router.home},
        {
          name:'国际学校', path:router.gjHome,
          list:[
            {name:'国际学校', path:router.gjHome},
            {name:'国际小学', path:router.gjxx},
            {name:'国际初中', path:router.gjcz},
            {name:'国际高中', path:router.gjgz},
            {name:'国际幼儿园', path:router.gjyey},
          ]
        },
        {
          name:'私立学校', path:router.slHome,
          list:[
            {name:'私立学校', path:router.slHome},
            {name:'私立小学', path:router.slxx},
            {name:'私立初中', path:router.slcz},
            {name:'私立高中', path:router.slgz},
          ]
        },
        {
          name:'热门推荐',
          tabList:[
            {
              name:'国际', id:1, labs: ["涵盖幼、小、初、高年级（可插班）", "百所院校，录取线低、专业热门", "不限国籍户籍/可随时咨询报名"],
              list:[
                [
                  {id:1, src:'./static/image/nav/gj-logo1.png', name:'北京德闳学校'},
                  {id:2, src:'./static/image/nav/gj-logo2.png', name:'北京市朝阳区赫...'},
                  {id:3, src:'./static/image/nav/gj-logo3.png', name:'哈罗北京'},
                  {id:4, src:'./static/image/nav/gj-logo4.png', name:'北京市朝阳区凯文...'},
                  {id:5, src:'./static/image/nav/gj-logo5.png', name:'北京市朝阳区北...'},
                ],
                [
                  {id:6, src:'./static/image/nav/gj-logo6.png', name:'领科教育北京校区'},
                  {id:7, src:'./static/image/nav/gj-logo7.png', name:'天津黑利伯瑞国...'},
                  {id:8, src:'./static/image/nav/gj-logo8.png', name:'天津惠灵顿学校'},
                  {id:9, src:'./static/image/nav/gj-logo9.png', name:'青苗国际幼儿园'},
                  {id:10, src:'./static/image/nav/gj-logo10.png', name:'北京市顺义区诺德...'},
                ],
                [
                  {id:11, src:'./static/image/nav/gj-logo11.png', name:'北京东方红学校'},
                  {id:12, src:'./static/image/nav/gj-logo12.png', name:'北京四中国际课程...'},
                  {id:13, src:'./static/image/nav/gj-logo13.png', name:'北京市通州区私立...'},
                  {id:14, src:'./static/image/nav/gj-logo14.png', name:'北京市房山区诺德...'},
                  {id:15, src:'./static/image/nav/gj-logo15.png', name:'耀华国际教育学校...'},
                ],
                [
                  {id:16, src:'./static/image/nav/gj-logo16.png', name:'橘郡国际学校'},
                  {id:17, src:'./static/image/nav/gj-logo17.png', name:'北京中加学校'},
                ]
              ]
            },
            {
              name:'私立', id:2, labs: ["涵盖幼、小、初、高年级（可插班）", "百所院校，录取线低、专业热门", "不限国籍户籍/可随时咨询报名"],
              list:[
                [
                  {id:1, src:'./static/image/nav/sl-logo1.png', name:'北京东方红学校'},
                  {id:2, src:'./static/image/nav/sl-logo2.png', name:'北京市通州区私立...'},
                  {id:3, src:'./static/image/nav/sl-logo3.png', name:'北京中加学校'},
                  {id:4, src:'./static/image/nav/sl-logo4.png', name:'北京新府学外国语...'},
                  {id:5, src:'./static/image/nav/sl-logo5.png', name:'北京市忠德学校'},
                ],[
                  {id:6, src:'./static/image/nav/sl-logo6.png', name:'北京市私立汇佳'},
                  {id:7, src:'./static/image/nav/sl-logo7.png', name:'北京市丰台区新北...'},
                  {id:8, src:'./static/image/nav/sl-logo8.png', name:'北京市实验外国语...'},
                  {id:9, src:'./static/image/nav/sl-logo9.png', name:'北京怀柔索兰诺中...'},
                  {id:10, src:'./static/image/nav/sl-logo10.png', name:'三河市燕郊剑桥学...'},
                ],[
                  {id:11, src:'./static/image/nav/sl-logo11.png', name:'北京海淀区尚丽外...'},
                  {id:12, src:'./static/image/nav/sl-logo12.png', name:'天津法耀高级中学'},
                  {id:13, src:'./static/image/nav/sl-logo13.png', name:'华油荣德小学'},
                  {id:14, src:'./static/image/nav/sl-logo14.png', name:'益田翰德学校'},
                  {id:15, src:'./static/image/nav/sl-logo15.png', name:'北京市朝阳区正源...'},
                ],[
                  {id:16, src:'./static/image/nav/sl-logo16.png', name:'北京市海淀区崛起...'},
                  {id:17, src:'./static/image/nav/sl-logo17.png', name:'北京市汇贤学校'},
                  {id:18, src:'./static/image/nav/sl-logo18.png', name:'北京市朝阳区博雅...'},
                ]
              ]
            }
          ]
        },{
          name:'快速择校',
          list:[
            {name:'国际院校库', path:router.gjzx+'?type=1'},
            {name:'私立院校库', path:router.gjzx+'?type=2'},
          ]
        },{
          name:'开放日',
          list:[
            {name:'国际学校开放日', path:router.gjkfr},
            {name:'私立学校开放日', path:router.slkfr},
          ]
        },{
          name:'预约看校', path:router.test,
        },
      ]
          
    }
  },
  methods:{
    submit(){
      
    },
    goTop(){
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
  }
};
</script>

<style>

</style>